@include('Home.head')
<style>

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;

    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }


    .el-carousel__item img {
        width: 100%;
        height: 100%;
    }

    .clothes-div {
        overflow: hidden;
        display: inline-block;
        margin: 5px;
    }

    .am-btn.am-btn-default.specs {
        float: left;
        margin-right: 3%;
        width: 65px;
        height: 40px;
        border-radius: 5px;
        color: #fff;
        background: #919891;
        text-align: center;
        margin-top: 1%;
        margin-bottom: 1%;
        outline: none;
    }

    .specs-p {
        margin-top: 5%;
    }
</style>
</head>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ goods.goodsname }}</a>
        </h1>
    </header>
    <!-- banner -->

    {{--<div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">--}}
    {{--<ul class="am-slides">--}}
    {{--<li><img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>--}}
    {{--<li><img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>--}}
    {{--</ul>--}}
    {{--</div>--}}

    <template>
        <div class="block">
            <el-carousel>
                <el-carousel-item v-for="item in goodsImgName">
                    <img :src="item.img">
                </el-carousel-item>
            </el-carousel>
        </div>
    </template>


    <div class="gray-panel">
        <div class="paoduct-title-panel">
            <h1 class="product-h1">@{{ goods.goodsname }}</h1>
            <p v-if="priceNow">
                <span class="am-fr product-title-gray-text"><i class="am-icon-star"></i>收藏</span>
                <span class="bold">限时价:</span><span class="red2" style="font-size: 16px">￥@{{priceNow }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                        style="text-decoration:line-through;color: #999">￥@{{ goods.originalprice }}</span>
            <p v-if="priceNow" class="red2">距离结束还剩:@{{ timekeep }}</p>
            <p v-if="!priceNow">
                <span class="am-fr product-title-gray-text"><i class="am-icon-star"></i>收藏</span>
                <span class="bold">价格:</span><span class="red2"
                                                   style="font-size: 16px">￥@{{goods.originalprice }}</span>
        </div>
        <div class="my-search-title-panel">
            <ul class="am-avg-sm-4 am-text-center am-text-sm">
                <li class="am-text-center">库存<br/>@{{ goods.total }}件</li>
                {{--<li class="am-text-center">销量<br />@{{ goods.sold }}件</li>--}}
            </ul>
        </div>
        <div class="my-search-title-panel">


            <!-- <div class="my-search-title-panel" id="clothes_type" style="display: none;">
                <div class="first-each-div" v-for="v,i in specsList" >
                    <p class="my-search-titp-p am-text-sm bold specs-p">@{{ v.name }}</p>
                    <div v-for="val,index in specsLists" >
                        <div v-if = "val.specs_id == v.id"  class="you specs" >
                           <div class="clothes-div" v-for="j,m in val.vals">
                                <button type="button" class="am-btn am-btn-default specs" checkSpecs="2" v-on:click="checkedSpecs( j.id )"  :id="'specs-btnss'+j.id">@{{ j.val }}</button>    
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->


            <p class="my-search-titp-p am-text-sm bold">数量</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="numberMinus()"><i
                                class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" v-model="number"
                           class="am-form-field txt-qty am-text-center am-text-sm"
                           style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="numberAdd()"><i
                                class="am-icon-plus"></i></button>
                </form>
            </div>


            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div>
                <ul class="am-avg-sm-2 am-text-center">
                <li class="am-text-center am-padding-sm" >
                        <button type="button" class="am-btn am-btn-danger am-btn-block am-radius" v-if="flag"
                                v-on:click="add(goods.id)">立即购买
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 商品详情 -->
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active">
                <a href="[data-tab-panel-0]">详情</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-1]">交易记录</a>
            </li>
        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active">@{{ goods.spec }}</div>
            <div data-tab-panel-1 class="am-tab-panel ">

                <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
                    <li v-for="val in recordData">@{{ val.user_name }}于@{{ val.updated_at }}日购买成功</li>
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                </ul>
            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script type="text/javascript">
    function checkedSpecs(e) {
        var checkSpecs = $("#specs-btnss" + e).attr("checkSpecs");
        if (checkSpecs == 1) {
            $("#specs-btnss" + e).attr("checkSpecs", 2);
            $("#specs-btnss" + e).css("background", "#919891");
        } else {
            $("#specs-btnss" + e).attr("checkSpecs", 1);
            $("#specs-btnss" + e).css("background", "#5bb95b");
            $("#specs-btnss" + e).parent('.clothes-div').siblings('').find('button').attr("checkSpecs", 2);
            $("#specs-btnss" + e).parent('.clothes-div').siblings('').find('button').css("background", "#919891");
        }
    }
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            hostUrl: "http://www.baoli.com",
            goods: [],
            goodsImgName: [],
            number: 2,
            MicroLeve: [],//商城等级
            user: [],//会员
            orderData: [],//交易记录
            specsExist: 0,
            priceNow: '',
            timekeep: '',
            recordData:[],  //购买记录
            flag:false
        },
        watch: {
            goods: function (val) {
                clearInterval(this.timer)
                var price = val.timeprice
                var startTime = this.goods.startTime.replace(/-/g, '/')
                this.timer = setInterval(() => {
                    var timekeep = ''
                    var timeNow = new Date().getTime()
                    var leftTime = timeNow - new Date(startTime)
                    var nowDay = Math.floor((leftTime) / 1000 / 60 / 60 / 24)  //第几天
                    var jsonPrice = JSON.parse(price)
                    var pr = jsonPrice[nowDay]
                    this.priceNow = pr
                    var leftTime = new Date().getTime() - new Date(startTime)
                    var flagTime = new Date().getTime() - new Date(startTime) - nowDay * 1000 * 60 * 60 * 24  //判断是否过期
                    var llTime = 1000 * 60 * 60 * 24 - leftTime % (1000 * 60 * 60 * 24)
                    var houer = Math.floor(llTime / (1000 * 60 * 60) % 24)  //小时
                    var mi = Math.floor(llTime / (1000 * 60) % 60) //分钟
                    var second = Math.floor(llTime / 1000 % 60)  //秒
                    houer = houer < 10 ? '0' + houer : houer
                    mi = mi < 10 ? '0' + mi : mi
                    second = second < 10 ? '0' + second : second
                    this.timekeep = houer + ':' + mi + ':' + second
                }, 200)
            }
        },
        //事件
        methods: {
            //初始化
            initialize: function () {
                var id = this.obtain('id');
                if (id > 0) {
                    //获取商品数据
                    $.post("/home/timeShop/goods", {
                        '_token': '{{csrf_token()}}',
                        class: 'find',
                        id: id
                    }, function (res) {
                        if (res.code) {
                            app.goods = res.data;
                            app.goodsImgName = res.data.img;
                            app.user = res.data.user;
                            app.orderData = res.data.orderData;
                            app.MicroLeve = res.data.MicroLeve;
                            app.number = res.data.purchase_num
                            app.recordData = res.recordData
                            app.flag = true
                        } else {
                            layer.msg(res.data);
                        }
                    });
                } else {
                    window.location.href = "/home/error";
                }

            },
            numberAdd: function () { //加
                if (app.number > app.goods.total || app.number == '') {
                    layer.msg('数量不对');
                    return;
                }
                app.number += 1;
            },
            numberMinus: function () { //减
                if (app.number <= app.goods.purchase_num || app.number == '') {
                    layer.msg('数量不对');
                    return;
                }
                app.number -= 1;
            },
            //生成订单
            add: function (id) {
                layer.load(2);

                var specs = '';
                var specsCheckData = [];
                // if ( app.specsExist == 1 ) {
                //     $(".specs-p").siblings('div').find("button").each(function(){
                //         if ( $(this).attr("checkSpecs") == 1 ) {
                //             specsCheckData.push( $(this).attr("checkSpecs") );
                //         }
                //     });
                //     if ( app.specsList.length != specsCheckData.length ) {
                //         layer.msg('请完整选择产品规格!');return false;
                //     }
                //     $(".clothes-div button").each(function(){
                //         if ( $(this).attr("checkSpecs") == 1 ) {
                //             var specsName = $(this).parents('.first-each-div').children('p').html();
                //             var specsVal = $(this).html();
                //             specs = specs+specsName+':'+specsVal+';';
                //         }
                //     });
                //     if ( specs == '' ) {
                //         layer.msg('请选择产品规格');return false;
                //     }
                // }

                app.number = parseInt(app.number);
                if (app.number < app.goods.purchase_num || app.number > app.goods.total || app.number == '') {
                    layer.msg('请输入正确的数量');
                    layer.closeAll('loading');
                    return false;
                }
                $.post("/home/timeShop/order", {
                    '_token': '{{csrf_token()}}',
                    class: 'add',
                    type: 0,
                    specsExist: app.specsExist,
                    specs: specs,
                    price: app.priceNow || app.goods.originalprice,
                    // specslength:app.specsList.length,
                    // Checklength:specsCheckData.length,
                    goods: [
                        {
                            goodsid: id,
                            number: app.number,
                            id: ''
                        }
                    ]
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code) {
                        layer.msg(res.data.data);
                        window.location.href = "/home/timeShop/getOrder?id=" + res.data.id;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },


            // car:function (id) {
            //     var specs = '';
            //     var specsCheckData = [];
            //     // if ( app.specsExist == 1 ) {
            //     //     $(".specs-p").siblings('div').find("button").each(function(){
            //     //         if ( $(this).attr("checkSpecs") == 1 ) {
            //     //             specsCheckData.push( $(this).attr("checkSpecs") );
            //     //         }
            //     //     });
            //     //     if ( app.specsList.length != specsCheckData.length ) {
            //     //         layer.msg('请完整选择产品规格!');return false;
            //     //     }
            //     //     $(".clothes-div button").each(function(){
            //     //         if ( $(this).attr("checkSpecs") == 1 ) {
            //     //             var specsName = $(this).parents('.first-each-div').children('p').html();
            //     //             var specsVal = $(this).html();
            //     //             specs = specs+specsName+':'+specsVal+';';
            //     //         }
            //     //     });
            //     //     if ( specs == '' ) {
            //     //         layer.msg('请选择产品规格');return false;
            //     //     }
            //     // }
            //     if(app.number < app.goods.purchase_num || app.number > app.goods.total || app.number == '' || isNaN(parseInt(app.number))){
            //         layer.msg('请输入正确的数量');
            //         return;
            //     }
            //     $.post("/home/microShop/car", {
            //         '_token': '{{csrf_token()}}',
            //         class:'add',
            //         goodsid:id,
            //         number:app.number,
            //         specs:specs,
            //         specsExist:app.specsExist,
            //         // specslength:app.specsList.length,
            //         // Checklength:specsCheckData.length
            //     }, function (res) {
            //         if (res.code) {
            //             layer.msg(res.data);
            //         } else {
            //             layer.msg(res.data);
            //         }
            //     });
            // },
            //获取url id
            obtain: function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == val) {
                        return pair[1];
                    }
                }
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    });
</script>
</html>
